<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta charset="utf-8">
    <script src="http://localhost:35729/livereload.js"></script>

    <script id="fragment-shader" type="x-shader/x-fragmen">
        precision mediump float; varying vec4 vColor; void main(void) { // gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 ); gl_FragColor = vColor; }
    </script>

    <script id="vertex-shader" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition; attribute vec4 aVertexColor; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main() { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor; }


    </script>


    <script id="node-vertex-shader" type="x-shader/x-vertex">
        uniform vec2 u_resolution; attribute vec2 a_position; attribute vec2 a_center; attribute float a_radius; varying vec2 center; varying vec2 resolution; varying float radius; void main() { vec2 clipspace = a_position / u_resolution * 2.0 - 1.0; gl_Position
        = vec4(clipspace * vec2(1, -1), 0, 1); radius = a_radius; center = a_center; resolution = u_resolution; }
    </script>

    <script id="node-fragment-shader" type="x-shader/x-fragment">

        precision mediump float; varying vec2 center; varying vec2 resolution; varying float radius; void main() { vec4 color0 = vec4(0.0, 0.0, 0.0, 0.0); float x = gl_FragCoord.x; float y = resolution[1] - gl_FragCoord.y; float dx = center[0] - x; float dy =
        center[1] - y; float distance = sqrt(dx*dx + dy*dy); if ( distance
        < radius ) gl_FragColor=v ec4(1.0, 0.5, 0.0, 1.0); else gl_FragColor=c olor0; } </script>

            <script type="text/javascript" src="../../Common/webgl-utils.js"></script>
            <script type="text/javascript" src="../../Common/initShaders.js"></script>
            <script type="text/javascript" src="../../Common/MV.js"></script>
            <script type="text/javascript" src="../../Common/glMatrix-0.9.5.min.js"></script>
            <script type="text/javascript" src="circle.js" charset="utf-8"></script>
</head>

<body>
    <canvas id="gl-canvas" width="512" height="512">
        Oops ... your browser doesn't support the HTML5 canvas element
    </canvas>

    <canvas id="canvas" style="border: none;" width="100" height="100"></canvas>
</body>

</html>
